/**常规的方法*/
function handleFiles (files){
    /**
     * 显示文件传输图标
     */

    /**将文件的单位转化由bytes转化成MB*/
    var formatFileSize = function(size){
        if (size> 1024 * 1024){
            size = (Math.round(size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        }
        else{
            size = (Math.round(size * 100 / 1024) / 100).toString() + 'KB';
        }
        return size;
    }
    /**显示加载栏*/
    var progressarray = new Array();
    var filelist = new Array();

        var uploadctrl = document.getElementById('uploadinfo');
        //每次选择上传文件即将原来上传文件清空
        while(uploadctrl.hasChildNodes()) //当div下还存在子节点时 循环继续
        {
            uploadctrl.removeChild(uploadctrl.firstChild);
        }
        if(files.length)
        {
            console.log(" FileList Demo:");
            var file;
            //取得FileList取得的file集合
            for(var i = 0 ;i<document.getElementById("files").files.length;i++){
                //file对象为用户选择的某一个文件
                file=document.getElementById("files").files[i];
                //进度显示控件初始化
                var divobj = document.createElement("div");
                divobj.id="div_"+file.name;
                divobj.name = "div_"+file.name;
                divobj.className = "ty"
                var progressobj = document.createElement("progress");
                progressobj.id="progress_"+file.name;
                progressobj.name = "progress_"+file.name;
                progressobj.className = "tyy"
                progressobj.value=0;
                divobj.innerHTML=(file.name+" "+"size="+formatFileSize(file.size));
                progressarray[i] = progressobj;
                document.getElementById("uploadinfo").appendChild(divobj);
                document.getElementById("uploadinfo").appendChild(progressobj);
                //将文件添加到文件类表
                filelist[i] = file;
            }
        }
}

/**ajax的方法*/
$(function () {
    $("#btn-change-avatar").click(function () {

        var formData = new FormData; //传递文件？？

        let files = document.getElementById("files").files; //可以直接采用js的方式获取DOM，来获取files属性
        // let files = $("#files")[0].files; //$("#files")[0] 是将jquery转换成javascripe类型，因为files属性是js的

        for (let item of files) {
            formData.append("images", item);
        }
        formData.append("title",$("#title").val());
        formData.append("price",$("#price").val());
        formData.append("num",$("#num").val());
        formData.append("categoryId",$('input[name="categoryId"]:checked').val()); //获得相同name的单选框的值，单选框的name 需要一致
        formData.append("sellPoint",$("#sellPoint").val());
        console.log(formData);
        $.ajax({
            xhrFields: {
                withCredentials: true
            },
            url:"/api/products/upload_product",
            type:"POST",
            data: formData,    //上传封装的FormData
            async: false,
            processData : false, //关闭ajax默认的处理数据形式--字符串
            contentType : false, //关闭ajax默认提交数据的形式--字符串
            dataType:"JSON",
            success:function (json) {
                if (json.state==200){
                    alert("商品上传成功");
                }else {
                    alert("商品上传失败");
                }
            },
            error:function (xhr) {
                alert("产生未知的异常"+ xhr.message);
            }
        })
    })
})